<script lang="ts" setup>
import PageTable from "@/components/PageTable/index.vue";
import SearchHeader from "@/components/SearchHeader/index.vue";
import PageContainer from "@/components/PageContainer/index.vue";
import {reactive, ref} from "vue";
import { View,CirclePlusFilled,Edit,Remove } from '@element-plus/icons-vue'
import {ButtonColor} from "@/utils/buttonsColor";
import { message } from "@/utils/message";
import { takeRentInvoiceList} from "@/api/demoApi";

defineOptions({
  name: "apply"
});

/**-------------------搜索-------------------**/
//查询参数
const queryList = [
  {key:'projectNo',label:'站点',type:'input'},
  {key:'projectName',label:'运营商',type:'input'},
  {key:'unit',label:'开票单位',type:'input'},
]
//分页
const pageQuery = reactive({
  page:1,
  size:15
})
//查询回调
const searchHandler = (queryForm)=>{
  console.log(queryForm)
}
//分页回调
const paginationHandler = (pageInfo) =>{
  pageQuery.page = pageInfo.page
  pageQuery.size = pageInfo.size
}

/**-------------------列表-------------------**/
//总条数
const total = ref(0)
const active = ref('ele')
//表格列
const eleTableColumns = [
  {label:'站点',key:'stationName'},
  {label:'运营商',key:'operator'},
  {label:'签约后站名',key:'signingName'},
  {label:'新老项目',key:'isNew'},
  {label:'区域',key:'area'},
  {label:'详细地址',key:'address'},
  {label:'开票金额',key:'invoicePrice'},
  {label:'开票单位',key:'rentSigningUnit'},
  {label:'发票类型',key:'rentInvoiceType'},
  {label:'税率',key:'rentTax'},
  {label:'开票内容',key:'rentInvoiceContent'},
  {label:'备注',key:'remark'},
  {label:'操作',key:'operation',custom:true,width: 250}
]
const rentTableColumns = [
  {label:'站点',key:'stationName'},
  {label:'运营商',key:'operator'},
  {label:'签约后站名',key:'signingName'},
  {label:'新老项目',key:'isNew',custom:true},
  {label:'区域',key:'area'},
  {label:'详细地址',key:'address'},
  {label:'开票金额',key:'invoicePrice'},
  {label:'开票单位',key:'rentSigningUnit',custom:true},
  {label:'发票类型',key:'rentInvoiceType',custom:true},
  {label:'税率',key:'rentTax'},
  {label:'开票内容',key:'rentInvoiceContent'},
  {label:'备注',key:'remark'},
  {label:'申请时间',key:'createTime'},
  {label:'操作',key:'operation',custom:true,width: 250}
]
//表格行数据
const eleTableData = ref([])
const rentTableData = ref([])
const getTableData = (model)=>{
  console.log(model)
  if(active.value === 'ele') {
    eleTableData.value = []
  }else {
    rentTableData.value = takeRentInvoiceList()
  }
}
getTableData()

/**-------------------操作-------------------**/
//弹窗
const projectDialog = ref()
const openDialog = (type:string,row:object)=>{
  switch (type){
    case 'add':
      projectDialog.value.dialogShow('添加项目')
      break
    case 'edit':
      projectDialog.value.dialogShow('编辑项目',row)
      break
  }
}
//未完成提示
const notDone = ()=>{
  message('抱歉，功能设计中...',{type:'warning'})
}
</script>

<template>
  <PageContainer>
    <!--顶部筛选-->
    <SearchHeader :query-list="queryList" @search="searchHandler">
      <template #button>
        <el-button :color="ButtonColor.ADD" :icon="CirclePlusFilled" @click="openDialog('add',null)">添加</el-button>
      </template>
    </SearchHeader>
    <!--    表格-->
    <el-tabs v-model="active" @tab-change="getTableData">
      <el-tab-pane label="电费开票申请" name="ele">User</el-tab-pane>
      <el-tab-pane label="场租开票申请" name="rent">
        <PageTable :columns="rentTableColumns" :page="pageQuery.page" :size="pageQuery.size" :table-data="rentTableData" :total="total" @pagination="paginationHandler">
          <template #isNew="{row}">
            <span v-if="row.isNew === 0">新项目</span>
            <span v-if="row.isNew === 1">老项目</span>
          </template>
          <template #rentSigningUnit="{row}">
            <span v-if="row.rentSigningUnit===0">晨邦</span>
            <span v-if="row.rentSigningUnit===1">网基</span>
            <span v-if="row.rentSigningUnit===2">优居</span>
            <span v-if="row.rentSigningUnit===3">坤澜</span>
            <span v-if="row.rentSigningUnit===4">晓鹰</span>
          </template>
          <template #rentInvoiceType="{row}">
            <span v-if="row.rentInvoiceType === 0">专票</span>
            <span v-if="row.rentInvoiceType === 1">普票</span>
          </template>
          <template #operation="{row}">

          </template>
        </PageTable>
      </el-tab-pane>
    </el-tabs>
  </PageContainer>
</template>

<style lang="scss" scoped>
:deep(.el-tabs) {
  height: 100%;

  .el-tab-pane {
    height: 100%;
    display: flex;
    flex-direction: column;

    .pageTable {
      margin: 0;
    }
  }
}
</style>
